import React, { useState } from 'react'
import A from './components/A';
import B from './components/B';
import C from './components/C';

export default function App() {
    let [count, setCount] = useState(100);
    return (
        <div>
            <h3>diff算法</h3>
            <p>count: {count}</p>
            <p><button onClick={() => {
                setCount(count + 1);
            }}>count++</button></p>
            <h4>对比不同类型的元素, 把原来的删掉创建一个新的</h4>
            {count % 2 === 1 ? <span>我是span</span> : <p>我是p标签</p>}

            <h4>针对不同的组件,卸载原来的，重新挂载新组件</h4>
            {count % 2 === 1 ? <A /> : <B />}

            <h4>针对相同的标签元素，只替换不同的部分，不会重新创建</h4>
            <p username={count % 2 === 1 ? 'atguigu' : '尚硅谷'}>我是唯一的p标签</p>

            <h4>针对相同的组件，会复用，不会卸载后重新挂载</h4>
            <C username={count % 2 === 1 ? 'atguigu' : '尚硅谷'}/>

            {count%2===1 ? <C username='atguigu'/> : <C username='尚硅谷'/>}
        </div>
    )
}
